<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>用户信息</title>
        <header th:replace="header::html"></header>
    </head>
    <body>
        <div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" onclick="xadmin.open('添加用户','/user/add')" lay-event="getCheckLength">添加</button>
            </div>
        </script>
<!--        数据表-->
        <table id="userinfo" lay-filter="test"></table>

        <script type="text/html" id="barhandle">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </body>
  <script>
      layui.use('table', function(){
          var table = layui.table;

          //第一个实例
          table.render({
              elem: '#userinfo' //绑定tableid
              ,height: 312
              ,url: '/user/list' //数据接口
              ,page: true //开启分页
              ,toolbar: '#toolbarDemo'//开启
              ,response: {
                  dataName: 'datas' //规定数据列表的字段名称，默认：data
              }
              ,cols: [
                  [ //表头
                  {field: 'id', title: 'ID', fixed: 'left'}
                  ,{field: 'nickname', title: '别名'}
                  ,{field: 'sex', title: '性别'}
                  ,{field: 'telephone', title: '电话'}
                  ,{field: 'email', title: '邮箱'}
                  ,{field: 'birthday', title: '出生年月'}
                  ,{field: 'status', title: '用户状态', templet: function(d){
                          return d.status == '1' ? '启动' : '禁用'
                      }}
                  ,{fixed: 'right', title:'操作', toolbar: '#barhandle',width:150}
              ]
              ]
          });

      });
  </script>

</html>